<div *ngIf="stream$ | async as stream; else loading">

  <div class="stream-actions">
    <button name="stream-stop" type="button" [appRoles]="['ROLE_CREATE']"
            [disabled]="(stream.streamDefinition.status === 'undeployed'
            || stream.streamDefinition.status === 'incomplete')"
            (click)="undeploy(stream.streamDefinition)"
            class="btn btn-default" title="Undeploy">
      <span class="glyphicon glyphicon-stop"></span>
      Undeploy
    </button>
    <button name="stream-deploy" type="button" [appRoles]="['ROLE_CREATE']"
            (click)="deploy(stream.streamDefinition)"
            class="btn btn-default" title="Deploy">
      <span class="glyphicon glyphicon-play"></span>
      Deploy
    </button>
    <button name="stream-remove" type="button" [appRoles]="['ROLE_CREATE']" (click)="destroy(stream.streamDefinition)"
            class="btn btn-danger" title="Destroy">
      <span class="glyphicon glyphicon-trash"></span>
      Destroy
    </button>
  </div>

  <div>
    <div class="row stream-summary-row">
      <div class="col-md-3">
        <strong>Definition:</strong>
      </div>
      <div class="col-md-21">
        <app-stream-dsl>
          {{ stream.streamDefinition.dslText }}
        </app-stream-dsl>
      </div>
    </div>
    <div class="row stream-summary-row">
      <div class="col-md-3">
        <strong>Status:</strong>
      </div>
      <div class="col-md-21">
        <app-stream-status [streamDefinition]="stream.streamDefinition"></app-stream-status>
      </div>
    </div>
    <div class="row stream-summary-row">
      <div class="col-md-3">
        <strong>Applications:</strong>
      </div>
      <div class="col-md-21">
        <table class="table table-apps table-hover table-actions">
          <thead>
          <tr>
            <th>Name</th>
            <th>Type</th>
            <th>&nbsp;</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let app of stream.apps">
            <td>
              <strong>{{ app.name }}</strong>
              <span *ngIf="app.origin !== app.name">
                  ({{ app.origin }})
                </span>
            </td>
            <td>
              <app-type [application]="app"></app-type>
            </td>
            <td class="table-actions" width="10px" nowrap="">
              <div class="actions" role="group">
                <a routerLink="/apps/{{ app.type }}/{{ app.origin }}" class="btn btn-default" title="Details">
                  <span class="glyphicon glyphicon-search"></span>
                </a>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div *ngIf="canShowDeploymentInfo(stream.streamDefinition)">
      <div class="row stream-summary-row">
        <div class="col-md-3">
          <strong>Deployment Info:</strong>
        </div>
        <div class="col-md-21">
          <app-stream-deployment-properties-info [streamDefinition]="stream.streamDefinition">
          </app-stream-deployment-properties-info>
        </div>
      </div>
    </div>

  </div>
</div>
<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
